<template>
  <div class="command-panel">
    <div class="command-message">
      <!-- 方案1: el-scrollbar配合v-for循环生成消息列表 -->
      <!-- 问题: v-for导致的性能问题, 即使toastQueue不更新,鼠标移动到组件上也会出现闪烁现象, 影响使用体验 -->
      <!-- <el-scrollbar ref="myScrollbar" style="height:100%;">
        <div
          v-for="(item, index) in toastQueue"
          :key="`${item.id}-${index}`"
          track-by="id"
          class="item-message"
        >{{ item.message }}</div>
      </el-scrollbar>-->

      <!-- 方案2: 使用vxe-table代替,可以记录大量的消息日志 -->
      <vxe-table
        ref="xTable"
        size="mini"
        auto-resize
        width="auto"
        align="left"
        border="none"
        :height="106"
        :resizable="true"
        :show-header="false"
        row-id="id"
        :data="toastQueue"
      >
        <vxe-table-column type="seq" width="60" :visible="false" />
        <vxe-table-column field="message" title="消息" />
        <vxe-table-column field="id" title="消息ID" :visible="false" />
      </vxe-table>
    </div>
    <div class="command-input">
      <el-input
        v-model="cmd"
        placeholder="请输入命令"
        @keyup.esc.native="onEsc"
        @keyup.enter.native="onSubmit"
      >
        <svg-icon slot="prefix" icon-class="console2" />
      </el-input>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      cmd: ''
    }
  },
  computed: {
    ...mapState('editor/diagram', {
      toastQueue: 'toastQueue',
      toastState: 'toastState',
      newToasts: 'newToasts'
    })
  },
  watch: {
    toastState(val) {
      console.log('接收到新的数据,状态码:', val)
      // 接收数据后,自动滚动到底部
      const that = this
      this.$nextTick(() => {
        that.scrollDown2()
      })
    }
  },
  mounted() {
    console.log('command.vue mounted')
    // 滚动到底部
    const that = this
    this.$nextTick(() => {
      that.scrollDown2()
    })
  },
  methods: {
    ...mapActions('editor/diagram', {
      print: 'print',
      runCommand: 'runCommand',
      esc: 'esc'
    }),
    // 参考: 滚动条滚动到底部
    // https://blog.csdn.net/a2398936046/article/details/83864561

    // // 方案1: 直接修改el-scrollbar的参数
    // scrollDown1() {
    //   this.$refs['myScrollbar'].wrap.scrollTop = this.$refs[
    //     'myScrollbar'
    //   ].wrap.scrollHeight
    // },
    // 方案2: vxe-table提供的clearScroll()返回一个Promise,在then()逻辑里修改滚动条
    scrollDown2() {
      const xTable = this.$refs.xTable
      xTable.clearScroll().then(() => {
        const el = xTable.$el.querySelector('.vxe-table--body-wrapper')
        if (el) {
          el.scrollTop = el.scrollHeight
        }
      })
    },
    // 用户按下esc,清空命令行
    onEsc() {
      if (this.cmd === '') {
        // 发送esc命令
        this.esc()
      } else {
        this.cmd = ''
      }
    },
    // 输入命令后回车
    onSubmit() {
      if (this.cmd !== '') {
        // const msg = `命令: ${this.cmd}`
        // this.print(msg)

        // 直接执行命令
        this.runCommand(this.cmd)
      }
      this.cmd = ''
    }
  }
}
</script>

<style lang="scss">
.command-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  .command-message {
    flex: 1;
    text-align: left;
    overflow: hidden;
    font-size: 12px;
    line-height: 12px;
    overflow: hidden;

    .el-scrollbar .el-scrollbar__wrap {
      overflow-x: hidden !important;
    }

    .item-message {
      padding-left: 10px;
      font-size: 12px;
      line-height: 24px;
    }

    // 让vxe-table使用flex布局
    display: flex;
    flex-direction: column;

    // 让vxe-table使用flex布局
    // 固定表头的同时,还可以自动适应随高度
    .vxe-table {
      flex: 1;
      height: 100%;
      .vxe-table--main-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .vxe-table--body-wrapper {
        flex: 1;
      }
    }

    // 表格行高缩小
    .vxe-table.size--mini .vxe-body--column.col--ellipsis,
      // .vxe-table.size--mini .vxe-footer--column.col--ellipsis,
      // .vxe-table.size--mini .vxe-header--column.col--ellipsis,
      .vxe-table.vxe-editable.size--mini .vxe-body--column {
      height: 28px !important;
    }

    .vxe-table.size--mini :not(.col--ellipsis).vxe-body--column,
    .vxe-table.size--mini :not(.col--ellipsis).vxe-footer--column,
    .vxe-table.size--mini :not(.col--ellipsis).vxe-header--column {
      padding: 0px 0;
    }

    // 全局缩小单元格的padding
    .vxe-table .vxe-cell {
      padding: 0 5px !important;
    }
  }
  .command-input {
    height: 24px;
    // background-color: yellow;
    .el-input__prefix {
      line-height: 23px !important;
    }

    .el-input--small {
      font-size: 12px;
      .el-input__inner {
        height: 24px !important;
        line-height: 24px !important;
        padding-left: 26px !important;
        padding-right: 0px !important;
        // border: none !important;
        border-radius: 0 !important;
        border: 0.5px solid #e8e8e8 !important;
      }
    }
  }
}
</style>
